<template>
  <div class="select-wrap">
    <p class="form-control" 
      :class="{'disabled': disabled}"
      @click.stop="onChangeDropdown" 
      v-text="selectLabel">
    </p>
    <span class="ico-drop" :class="{actived: isDropdown}"></span>
    <transition name="dropdown">
      <div class="select-drop" v-show="isDropdown">
        <div class="one" v-for="(option, index) in options" :key="index">
          <p @click.stop="onSelected(option.label, option.value)" :class="{selected: option.label === selectLabel}">
            {{option.label}}
          </p>
          <div class="two" v-for="(two, tIndex) in option.childs" :key="tIndex">
            <p @click.stop="onSelected(two.label, two.value)" :class="{selected: two.label === selectLabel}">
              {{two.label}}
            </p>
            <ul>
              <li v-for="(three, thrIndex) in two.childs"
                :key="thrIndex"
                v-text="three.className"
                :value="three.id"
                :class="{selected: three.className === selectLabel}"
                @click.stop="onSelected(three.className, three.id)"></li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
    <input type="hidden" ref="select" :name="name" :value="value">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default() {
        return [
          {
            value: '1',
            label: '一级',
            childs: [
              {
                value: '2',
                label: '二级',
                childs: [
                  {
                    id: '3',
                    className: '三级'
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    name: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      selectLabel: '请选择商品分类',
      isDropdown: false
    }
  },
  mounted() {
    this._updateSelected()
  },
  methods: {
    onChangeDropdown(ev) {
      if (this.disabled) return
      this.isDropdown = !this.isDropdown
    },
    onSelected(label, val) {
      this.selectLabel = label
      this.isDropdown = false
      this.$emit('input', val)
      this.$emit('on-select', val)
      this.$emit('on-all', {label: label, val: val})
    },
    // 每次更新，和每次初始时调用，设置显示
    _updateSelected() {
      // debugger
      if (!this.value || this.value === '请选择商品分类') {
        this.selectLabel = '请选择商品分类'
      } else {
        this.options.forEach((one, oneIndex) => {
          if (this.value == one.value) {
            this.selectLabel = one.label
          }
          one.childs.forEach((two, twoIndex) => {
            if (this.value == two.value) {
              this.selectLabel = two.label
            }
            two.childs.forEach((three, threeIndex) => {
              if (this.value == three.value) {
                this.selectLabel = three.label
              }
            })
          })
        })
      }
      document.addEventListener('click', () => {
        if (this.isDropdown) {
          this.isDropdown = false
        }
      }, false)
    }
  },
  updated() {
    this._updateSelected()
  }
}
</script>

<style lang="scss" scoped>
.select-wrap {
  position: relative;
  .form-control {
    min-width: 90px;
    padding-right: 40px;
    border: 1px solid #ddd;
    height: 30px;
    line-height: 30px;
    text-align: left;
    color: #666;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    &.disabled {
      cursor: default;
      background: #eee;
    }
  }
  .ico-drop {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 2;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #444;
    transition: all .2s;
    &.actived {
      transform: rotate(180deg) translateY(8px);
    }
  }
}
.select-drop {
  position: absolute;
  width: 100%;
  z-index: 5;
  max-height: 230px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #d1dbe5;
  border-top-color: transparent;
  overflow-x: hidden;
  .one > p, .two > p, ul li {
    padding: 8px 10px;
    cursor: pointer;
    color: #48576a;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &.disabled {
      cursor: default;
      background: #eee;
      &:hover {
        color: #48576a;
        background: #eee;
      }
    }
    &.selected {
      color: #fff;
      background: #20a0ff;
      &:hover {
        color: #fff;
        background: #20a0ff;
      }
    }
    &:hover {
      background: #e4e8f1;
    }
  }
  .two > p {
    padding-left: 20px;
  }
  ul li {
    padding-left: 30px;
  }
}
</style>